<template>
  <div>
    <!-- 搜索栏区域 -->
    <el-card class="SearchCard" body-style="padding:0px">
      <el-row>
        <el-col :span="2">
          <div class="SearchTitle">条件搜索栏</div>
        </el-col>
        <el-col :span="4">
          <el-row>
            <el-col :span="10">
              <div class="SearchLable">搜索关键字</div>
            </el-col>

            <el-col :span="14">
              <div class="SearchLable">
                <el-input placeholder="请输入内容" v-model="queryInfo.srm" clearable></el-input>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="4">
          <el-row>
            <el-col :span="10">
              <div class="SearchLable">疾病搜索</div>
            </el-col>

            <el-col :span="14">
              <div class="SearchLable">
                <el-select v-model="queryInfo.Insufficiency" placeholder="全部">
                  <el-option
                    v-for="item in SearchOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="2">
          <div class="SearchLable">
            <el-button size="medium" type="primary" @click="getdictDiseaseList()">搜索</el-button>
          </div>
        </el-col>
        <el-col :span="2">
          <div class="SearchLable">
            <el-button size="medium" @click="dialogFormVisible = true" type="primary">新增疾病</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="TableCard" :body-style="{ padding: '0px' }">
      <div>
        <el-table
          :data="dictDrugList"
          border
          :header-cell-style="{ background: '#3F9DFD', color: '#FFF' }"
          size="medium"
          stripe
          height="531"
          style="width: 100%;font-size:12px"
        >
          <el-table-column prop="icdCode" fixed label="疾病编码" width="100"></el-table-column>
          <el-table-column fixed width="250" label="疾病名称">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="showDisease (scope.row.id)"
              >{{scope.row.icdName}}</el-button>
            </template>
          </el-table-column>
          <el-table-column fixed width="50" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="open(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
          <el-table-column width="140" label="肾功能不全(可编辑)">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.renal"
                @change="selectChangrenal(scope.row.id, $event)"
                size="mini"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column width="140" label="肝功能不全(可编辑)">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.hepatic"
                @change="selectChanghepatic(scope.row.id, $event)"
                size="mini"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column width="140" label="心脏功能不全(可编辑)">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.cardio"
                @change="selectChangcardio(scope.row.id, $event)"
                size="mini"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column width="140" label="肺功能不全(可编辑)">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.pulm"
                @change="selectChangpulm(scope.row.id, $event)"
                size="mini"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column width="140" label="神经功能不全(可编辑)">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.neur"
                @change="selectChangneur(scope.row.id, $event)"
                size="mini"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="endo" width="140" label="胰腺功能不全(可编辑)">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.endo"
                @change="selectChangendo(scope.row.id, $event)"
                size="mini"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="pregLabel" width="140" label="妊娠问题(可编辑)">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.pregLabel"
                @change="selectChangpregLabel(scope.row.id, $event)"
                size="mini"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="lactLabel" width="140" label="哺乳问题(可编辑)">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.lactLabel"
                @change="selectChanglactLabel(scope.row.id, $event)"
                size="mini"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column width="140" label="肝问题(可编辑)">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.hepLabel"
                @change="selectChanghepLabel(scope.row.id, $event)"
                size="mini"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="renLabel" width="140" label="肾问题(可编辑)">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.renLabel"
                @change="selectChangrenLabel(scope.row.id, $event)"
                size="mini"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[20, 50, 100]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.total"
          background
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog title="新增疾病" :visible.sync="dialogFormVisible">
      <el-form :inline="true" :model="diseaseInfo" class="demo-form-inline">
        <el-row>
          <el-col :span="12">
            <el-form-item label="疾病名称">
              <el-input v-model="diseaseInfo.icdName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="疾病编码">
              <el-input v-model="diseaseInfo.icdCode"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="肾功能不全">
              <el-radio-group v-model="diseaseInfo.renal">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="肝功能不全">
              <el-radio-group v-model="diseaseInfo.hepatic">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="心脏功能不全">
              <el-radio-group v-model="diseaseInfo.cardio">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="肺功能不全">
              <el-radio-group v-model="diseaseInfo.pulm">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="神经功能不全">
              <el-radio-group v-model="diseaseInfo.neur">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="胰脏功能不全">
              <el-radio-group v-model="diseaseInfo.endo">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="妊娠问题">
              <el-radio-group v-model="diseaseInfo.pregLabel">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="哺乳问题">
              <el-radio-group v-model="diseaseInfo.lactLabel">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="肝相关问题">
              <el-radio-group v-model="diseaseInfo.hepLabel">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="肾相关问题">
              <el-radio-group v-model="diseaseInfo.renLabel">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addDisease">保存</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 疾病信息/////////////////////////////////////////////////////// -->
    <el-dialog title="查看疾病信息" :visible.sync="showDiseaseVisible" width="45%">
      <el-form :inline="true" :model="showDiseaseInfo" class="demo-form-inline">
        <el-row>
          <el-col :span="12">
            <el-form-item label="疾病名称">
              <el-input v-model="showDiseaseInfo.icdName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="疾病编码">
              <el-input v-model="showDiseaseInfo.icdCode"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="肾功能不全:">
              <div v-if="showDiseaseInfo.renal=='0'">否</div>
              <div v-else>是</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="肝功能不全:">
              <div v-if="showDiseaseInfo.hepatic=='0'">否</div>
              <div v-else>是</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="心脏功能不全:">
              <div v-if="showDiseaseInfo.cardio=='0'">否</div>
              <div v-else>是</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="肺功能不全:">
              <div v-if="showDiseaseInfo.pulm=='0'">否</div>
              <div v-else>是</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="神经功能不全:">
              <div v-if="showDiseaseInfo.neur=='0'">否</div>
              <div v-else>是</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="胰脏功能不全:">
              <div v-if="showDiseaseInfo.endo=='0'">否</div>
              <div v-else>是</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="妊娠问题:">
              <div v-if="showDiseaseInfo.pregLabel=='0'">否</div>
              <div v-else>是</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="哺乳问题:">
              <div v-if="showDiseaseInfo.lactLabel=='0'">否</div>
              <div v-else>是</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="肝相关问题:">
              <div v-if="showDiseaseInfo.hepLabel=='0'">否</div>
              <div v-else>是</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="肾相关问题:">
              <div v-if="showDiseaseInfo.renLabel=='0'">否</div>
              <div v-else>是</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDiseaseVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getdictDiseaseList,
  addDiseaseInfo,
  showDieaseList,
  UpdateDiseaseInfo
} from "@/api/rad";
export default {
  data() {
    return {
      queryInfo: {
        srm: "",
        pageList: 1,
        pageSize: 20,
        Insufficiency: ""
      },
      total: 0,
      dictDrugList: [],
      SearchOptions: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "renal",
          label: "肾功能不全"
        },
        {
          value: "hepatic",
          label: "肝功能不全"
        },
        {
          value: "cardio",
          label: "心脏功能不全"
        },
        {
          value: "pulm",
          label: "肺功能不全"
        },
        {
          value: "neur",
          label: "神经功能不全"
        },
        {
          value: "endo",
          label: "胰腺功能不全"
        },
        {
          value: "pregLabel",
          label: "妊娠问题"
        },
        {
          value: "lactLabel",
          label: "哺乳问题"
        },
        {
          value: "hepLabel",
          label: "肝相关问题"
        },
        {
          value: "renLabel",
          label: "肾相关问题"
        }
      ],
      options: [
        {
          value: 1,
          label: "是"
        },
        {
          value: 0,
          label: "否"
        }
      ],
      dialogFormVisible: false,
      diseaseInfo: {
        icdCode: "",
        icdName: "",
        renal: "",
        hepatic: "",
        cardio: "",
        pulm: "",
        neur: "",
        endo: "",
        pregLabel: "",
        lactLabel: "",
        hepLabel: "",
        renLabel: ""
      },
      showDiseaseVisible: false,
      showDiseaseInfo: []
    };
  },
  created: function() {
    this.getdictDiseaseList();
  },
  methods: {
    // 监听pagesize改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getdictDiseaseList();
      // console.log(newSize)
    },
    // 当前展示的页面
    handleCurrentChange(newPage) {
      this.queryInfo.pageList = newPage;
      this.getdictDiseaseList();
      // console.log(newPage)
    },
    async getdictDiseaseList() {
      let _this = this;
      let res = await this.$rad.getdictDiseaseList({
        srm: this.queryInfo.srm,
        page: this.queryInfo.pageList,
        pageSize: this.queryInfo.pageSize,
        Insufficiency: this.queryInfo.Insufficiency
      });
      this.total = res.total;
      this.dictDrugList = res.rows;
      console.log(res);
    },
    async addDisease() {
      console.log(this.diseaseInfo);
      let _this = this;
      if (_this.diseaseInfo.icdName == "") {
        this.$message({
          type: "warning",
          message: "请输入疾病名称"
        });
      } else if (_this.diseaseInfo.icdCode == "") {
        this.$message({
          type: "warning",
          message: "请输入疾病编码"
        });
      } else if (_this.diseaseInfo.renal == "") {
        this.$message({
          type: "warning",
          message: "请选择肾功能"
        });
      } else if (_this.diseaseInfo.hepatic == "") {
        this.$message({
          type: "warning",
          message: "请选择肝功能"
        });
      } else if (_this.diseaseInfo.cardio == "") {
        this.$message({
          type: "warning",
          message: "请选择心脏功能"
        });
      } else if (_this.diseaseInfo.pulm == "") {
        this.$message({
          type: "warning",
          message: "请选择肺功能"
        });
      } else if (_this.diseaseInfo.neur == "") {
        this.$message({
          type: "warning",
          message: "请选择神经功能"
        });
      } else if (_this.diseaseInfo.endo == "") {
        this.$message({
          type: "warning",
          message: "请选择胰腺功能"
        });
      } else if (_this.diseaseInfo.pregLabel == "") {
        this.$message({
          type: "warning",
          message: "请选择妊娠问题"
        });
      } else if (_this.diseaseInfo.lactLabel == "") {
        this.$message({
          type: "warning",
          message: "请选择哺乳问题"
        });
      } else if (_this.diseaseInfo.hepLabel == "") {
        this.$message({
          type: "warning",
          message: "请选择肝相关问题"
        });
      } else if (_this.diseaseInfo.renLabel == "") {
        this.$message({
          type: "warning",
          message: "请选择肾相关问题"
        });
      } else {
        let res = await this.$rad.addDiseaseInfo({
          icdCode: _this.diseaseInfo.icdCode,
          icdName: _this.diseaseInfo.icdName,
          renal: _this.diseaseInfo.renal,
          hepatic: _this.diseaseInfo.hepatic,
          cardio: _this.diseaseInfo.cardio,
          pulm: _this.diseaseInfo.pulm,
          neur: _this.diseaseInfo.neur,
          endo: _this.diseaseInfo.endo,
          pregLabel: _this.diseaseInfo.pregLabel,
          lactLabel: _this.diseaseInfo.lactLabel,
          hepLabel: _this.diseaseInfo.hepLabel,
          renLabel: _this.diseaseInfo.renLabel
        });
        console.log(res);
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.getdictDiseaseList();
        } else {
          this.$message.error(res.msg);
        }
      }
    },
    async showDisease(id) {
      let res = await this.$rad.showDieaseList({
        id: id
      });
      // console.log(res)
      this.showDiseaseInfo = res.data;
      console.log(this.showDiseaseInfo);
      this.showDiseaseVisible = true;
    },
    // 肾功能补全
    async selectChangrenal(id, e) {
      let res = await this.$rad.UpdateDiseaseInfo({
        id: id,
        renal: e
      });
      if (res.code == 1) {
        this.$message.success(res.msg);
        this.getdictDiseaseList();
      } else {
        this.$message.error(res.msg);
      }
    },
    // 肝功能补全
    async selectChanghepatic(id, e) {
      let res = await this.$rad.UpdateDiseaseInfo({
        id: id,
        hepatic: e
      });
      if (res.code == 1) {
        this.$message.success(res.msg);
        this.getdictDiseaseList();
      } else {
        this.$message.error(res.msg);
      }
    },
    // 心脏功能补全
    async selectChangcardio(id, e) {
      let res = await this.$rad.UpdateDiseaseInfo({
        id: id,
        cardio: e
      });
      if (res.code == 1) {
        this.$message.success(res.msg);
        this.getdictDiseaseList();
      } else {
        this.$message.error(res.msg);
      }
    },
    // 肺功能补全
    async selectChangpulm(id, e) {
      let res = await this.$rad.UpdateDiseaseInfo({
        id: id,
        pulm: e
      });
      if (res.code == 1) {
        this.$message.success(res.msg);
        this.getdictDiseaseList();
      } else {
        this.$message.error(res.msg);
      }
    },
    // 神经功能不全
    async selectChangneur(id, e) {
      let res = await this.$rad.UpdateDiseaseInfo({
        id: id,
        neur: e
      });
      if (res.code == 1) {
        this.$message.success(res.msg);
        this.getdictDiseaseList();
      } else {
        this.$message.error(res.msg);
      }
    },
    // 胰腺功能不全
    async selectChangendo(id, e) {
      let res = await this.$rad.UpdateDiseaseInfo({
        id: id,
        endo: e
      });
      if (res.code == 1) {
        this.$message.success(res.msg);
        this.getdictDiseaseList();
      } else {
        this.$message.error(res.msg);
      }
    },
    // 妊娠问题
    async selectChangpregLabel(id, e) {
      let res = await this.$rad.UpdateDiseaseInfo({
        id: id,
        pregLabel: e
      });
      if (res.code == 1) {
        this.$message.success(res.msg);
        this.getdictDiseaseList();
      } else {
        this.$message.error(res.msg);
      }
    },
    // 妊娠问题
    async selectChanglactLabel(id, e) {
      let res = await this.$rad.UpdateDiseaseInfo({
        id: id,
        lactLabel: e
      });
      if (res.code == 1) {
        this.$message.success(res.msg);
        this.getdictDiseaseList();
      } else {
        this.$message.error(res.msg);
      }
    },
    // 妊娠问题
    async selectChanghepLabel(id, e) {
      let res = await this.$rad.UpdateDiseaseInfo({
        id: id,
        hepLabel: e
      });
      if (res.code == 1) {
        this.$message.success(res.msg);
        this.getdictDiseaseList();
      } else {
        this.$message.error(res.msg);
      }
    },
    // 妊娠问题
    async selectChangrenLabel(id, e) {
      let res = await this.$rad.UpdateDiseaseInfo({
        id: id,
        renLabel: e
      });
      if (res.code == 1) {
        this.$message.success(res.msg);
        this.getdictDiseaseList();
      } else {
        this.$message.error(res.msg);
      }
    },
    // 删除提示
    open(id) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.delete(id);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 删除操作
    async delete(id) {
      let res = await this.$rad.DeleteDiseaseInfo({
        id: id
      });
      if (res.code == 1) {
        this.$message.success(res.msg);
        this.getdictDiseaseList();
      } else {
        this.$message.error(res.msg);
      }
    }
  }
};
</script>
<style>
.SearchCard {
  height: 50px;
  font-size: 12px;
}
.SearchTitle {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #c2c2c2;
}
.SearchLable {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.TableCard {
  margin-left: 3px;
  margin-top: 2px;
}
.block {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 12px;
}
</style>